import { ReactNode } from "react";
import { Checkbox, View } from "@tarojs/components";
import ByIcon from "./ByIcon";

type ByCheckboxProps = {
  value?: string;
  disabled?: boolean;
  checked?: boolean;
  /**
   * 选了，没完全选
   */
  indeterminate?: boolean;
  className?: string;

  children?: ReactNode;
};

type ByCheckboxEvents = {
  onChange?: (event: any) => void;
};

export default ({
  value,
  checked,
  disabled,
  className,
  indeterminate,

  children,
  onChange,
}: ByCheckboxEvents & ByCheckboxProps) => {
  return (
    <View className={`relative inline-flex items-center ${className}`}>
      <Checkbox
        value={value || ""}
        className="absolute top-0 left-0 w-full h-full opacity-0"
        checked={checked}
        disabled={disabled}
        onClick={(event) => (event.stopPropagation(), onChange?.(event))}
      />

      <ByIcon
        size={32}
        name={
          checked
            ? "CheckboxChecked"
            : indeterminate
            ? "UnFullChecked"
            : "Checkbox"
        }
        className={checked || indeterminate ? "text-primary" : "text-third"}
      />

      {children}
    </View>
  );
};
